<div class="container">
  <div class="main-image-container">
    <img src="../../../assets/logo.png" alt="burning-okr logo" class="main-image">
  </div>

  <div class="main-button-container-flex main-button-container">

    <a class="main-button button-bag-layout-inverted" href="https://github.com/BurningOKR/BurningOKR" mat-stroked-button target="_blank" rel="noopener noreferrer">{{ 'demo-home.github' | translate }}</a>

    <span class="line-break hidden-s-up"></span>

    <button class="main-button button-bag-layout-inverted" mat-stroked-button [matMenuTriggerFor]="documentationMenu">
      {{'demo-home.documentation'| translate}}
    </button>

    <span class="line-break hidden-s-up"></span>

    <button class="main-button button-bag-layout-inverted" mat-stroked-button (click)="openPlayground()">{{ 'demo-home.playground' | translate }}</button>

  </div>

  <div class="main-content col-12">

    <div class="wow animate__fadeIn col-m-7 col-s-12" data-wow-duration="1s">
      <h1 class="headline">{{'demo-home.welcome.title' | translate}}</h1>
      <iframe width="560" height="315" data-name="youtube" data-src="https://www.youtube.com/embed/Lw_-Y4B8ad0" title="YouTube video player" allowfullscreen></iframe>
      <p>
        {{'demo-home.welcome.content'| translate}}
      </p>
    </div>

    <div class="wow animate__fadeIn content-image-container" data-wow-duration="1s">
      <img src="../../../assets/okr-stocks/OKR_zielscheibe.svg" class="col-m-5 col-s-12 content-image" alt="">
    </div>

  </div>

  <div class="main-content col-12">

    <div class="wow animate__fadeIn content-image-container" data-wow-duration="1s">
      <img src="../../../assets/okr-stocks/OKR_stonks.svg" class="col-m-5 col-s-12 content-image" alt="">
    </div>

    <div class="wow animate__fadeIn col-m-7 col-s-12" data-wow-duration="1s">
      <h2 class="headline">{{'demo-home.visions.title' | translate}}</h2>
      <p>
        {{'demo-home.visions.content'| translate}}
      </p>
    </div>

  </div>

  <div class="main-content col-12">

    <div class="wow animate__fadeIn col-m-7 col-s-12" data-wow-duration="1s">
      <h2 class="headline">{{'demo-home.digitalization.title' | translate}}</h2>
      <p>
        {{'demo-home.digitalization.content' | translate}}
      </p>
    </div>

    <div class="wow animate__fadeIn content-image-container" data-wow-duration="1s">
      <img src="../../../assets/okr-stocks/OKR_digital.svg" class="col-m-5 col-s-12 content-image" alt="">
    </div>

  </div>


  <div class="main-content col-12">
    <div class="wow animate__fadeIn content-image-container" data-wow-duration="1s">
      <img src="../../../assets/okr-stocks/OKR_billboard.svg" class="col-m-5 col-s-12 content-image" alt="">
    </div>

    <div class="wow animate__fadeIn col-m-7 col-s-12" data-wow-duration="1s">
      <h2 class="headline">{{'demo-home.target-management.title' | translate}}</h2>
      <p>
        {{'demo-home.target-management.content' | translate}}
      </p>
    </div>

  </div>


  <div class="main-content col-12">
    <div class="wow animate__fadeIn col-m-7 col-s-12" data-wow-duration="1s">
      <h2 class="headline">{{'demo-home.features.title' | translate}}</h2>
      <p>
        {{'demo-home.features.content' | translate}}
      </p>
      <ul innerHTML="{{'demo-home.features.perks-list' | translate}}"></ul>
    </div>

    <div class="wow animate__fadeIn content-image-container" data-wow-duration="1s">
      <img src="../../../assets/okr-stocks/OKR_features.svg" class="col-m-5 col-s-12 content-image" alt="">
    </div>
  </div>


  <div class="main-content col-12">


    <div class="wow animate__fadeIn content-image-container" data-wow-duration="1s">
      <img src="../../../assets/okr-stocks/OKR_okr.svg" class="col-m-5 col-s-12 content-image" alt="">
    </div>

    <div class="wow animate__fadeIn col-m-7 col-s-12" data-wow-duration="1s">
      <h2 class="headline">{{'demo-home.installation.title' | translate}}</h2>
      <p>
        {{'demo-home.installation.content' | translate}}
      </p>
      <ul innerHTML="{{'demo-home.installation.list' | translate}}"></ul>
    </div>
  </div>


  <div class="main-content col-12">
    <div class="wow animate__fadeIn col-m-7 col-s-12" data-wow-duration="1s">
      <h2 class="headline">{{'demo-home.free-and-open-source.title' | translate}}</h2>
      <p innerHTML="{{'demo-home.free-and-open-source.content' | translate}}"></p>
    </div>

    <div class="wow animate__fadeIn content-image-container" data-wow-duration="1s">
      <img src="../../../assets/okr-stocks/OKR_trompete.svg" class="col-m-5 col-s-12 content-image" alt="">
    </div>
  </div>


  <div class="main-content col-12">
    <div class="wow animate__fadeIn content-image-container" data-wow-duration="1s">
      <img src="../../../assets/okr-stocks/OKR_kontakt.svg" class="col-m-5 col-s-12 content-image" alt="">
    </div>

    <div class="wow animate__fadeIn col-m-7 col-s-12" data-wow-duration="1s">
      <h2 class="headline">{{'demo-home.contact.title' | translate}}</h2>
      <p>
        {{'demo-home.contact.content' | translate}}
      </p>
      <p innerHTML="{{'demo-home.contact.content-with-link' | translate}}"></p>
    </div>

  </div>


  <div class="main-content col-12">
    <div class="wow animate__fadeIn" data-wow-duration="1s">
      <h2 class="headline">{{'demo-home.further-information.title' | translate}}</h2>
      <p innerHTML="{{'demo-home.further-information.content' | translate}}"></p>
    </div>
  </div>



  <div class="col-12 social-media-container footer-margin wow animate__fadeInUp" data-wow-duration="1s">
    <div class="social-media-link">
      <a href="https://github.com/BurningOKR/BurningOKR" target="_blank" rel="noopener noreferrer">
        <img src="../../../assets/GitHub-Mark-120px-plus.png" alt="BurningOKR GitHub" class="image-link" id="github-icon">
      </a>
    </div>

    <div class="line-break hidden-s-up"></div>

    <div class="social-media-link">
      <a href="http://twitter.com/BurningOkr" target="_blank" rel="noopener noreferrer">
        <img src="../../../assets/Twitter_Logo_Blue.svg" alt="BurningOKR Twitter" class="image-link" id="twitter-icon">
      </a>
    </div>

    <div class="line-break hidden-s-up"></div>

    <div class="social-media-link">
      <a href="mailto:burningokr@brockhaus-ag.de" target="_blank" rel="noopener noreferrer">
        <img src="../../../assets/mail_outline-24px.svg" alt="E-Mail" class="image-link" id="mail-icon">
      </a>
    </div>

  </div>
</div>



<mat-menu #documentationMenu>
  <a href="https://burning-okr.gitbook.io/burningokr/" mat-menu-item target="_blank" rel="noopener noreferrer">
    {{'language-picker.language.german' | translate}}
  </a>
  <a href="https://burning-okr.gitbook.io/burningokr/v/en/" mat-menu-item target="_blank" rel="noopener noreferrer">
    {{'language-picker.language.english' | translate}}
  </a>
</mat-menu>

